<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子元素选择器</title>
    <style>

        .my-div {
            width: 300px;
            height: 300px;
            border: 1px solid black;
            text-align: center;
        }

        /*
        功能:
            介绍子元素选择器的作用.
        说明:
            1. 子元素选择器与后代选择器较为类似。相对于后代选择器，子元素选择器所涉及的范围会更小。
                - 后代选择器可以跨层级影响，而子元素选择器要求父元素和子元素一定为上下级关系，中间如果隔着其他元素则会失效。
                - 父元素和子元素之间需要用 > (子结合符) 隔开。
        */
        .my-div > h1 {
            color: red;
            font-size: 20px;
        }

    </style>
</head>
<body>
<div class="my-div">
    <div>
        <h1>h1标签-1</h1>
    </div>
    <h1>h1标签-2</h1>
</div>
</body>
</html>